<template>
  <div>
    <!-- el-card区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>素材管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="action-head">
        <!-- 顶部radio -->
        <el-radio-group v-model="radio">
          <el-radio-button label="全部" @click.native="loadImages(false)"></el-radio-button>
          <el-radio-button label="收藏" @click.native="loadImages(true)"></el-radio-button>
        </el-radio-group>
        <el-button type="success" size="default" @click="dialogVisible = true">上传图片</el-button>
      </div>
      <!-- 底部图片 -->
      <el-row :gutter="10" class="imageContainer">
          <el-col :xs="12" :sm="6"  :lg="4" v-for="item in images" :key="item.id">
            <el-image style="width: 100px; height: 100px"
            :src='item.url'>
            </el-image>
          </el-col>
      </el-row>
    </el-card>
    <!-- 遮罩层区域 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <!-- 内容区域 -->
      <el-upload
        class="upload"
        drag
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        :headers="headers"
        name="image"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <!-- 按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getImages } from '../../api/images'

export default {
  name: 'ImageIndex',
  data() { 
    const user = JSON.parse(window.localStorage.getItem('user'))
    return {
      radio:'全部',
      images: [],//请求的image图片 
      dialogVisible: false,//遮罩层显示与隐藏
      headers:{
        Authorization:`Bearer ${user.token}`
      }
    }
  },
  props: {

  },
  components:{
  },
  mounted() {

  },
  created(){
    this.loadImages(false)
  },
  methods:{
    //网络 请求图片
    async loadImages(collect = false){
      try {
        let res = await getImages({
          collect
        })
        console.log(res.data.data.results);
        this.images = res.data.data.results
        this.$message('成功了')
      } catch (error) {
        this.$message('失败了')
      }
    },


  },
 }
</script>

<style scoped>
.imageContainer {
 margin-top: 20px;   
}
.action-head{
  display: flex;
  justify-content: space-between;
}
.upload{
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>
